<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="twitter:card" content="summary" />
        <meta property="twitter:domain" content="bloomberg.github.io" />
        <meta property="og:url" content="https://bloomberg.github.io/ts-blank-space" />
        <meta property="og:title" content="ts-blank-space" />
        <meta
            property="og:description"
            content="A small, fast, pure JavaScript type-stripper that uses the official TypeScript parser."
        />
        <title>{{ title }}</title>
        <link rel="stylesheet" href="/node_modules/prism-themes/themes/prism-vs.min.css" />
        <link
            rel="stylesheet"
            href="/node_modules/prism-themes/themes/prism-vsc-dark-plus.min.css"
            disabled
            id="prism-dark-link"
        />
        <link rel="stylesheet" href="/assets/base.min.css" />
        <style>
            html {
                font-size: 18px;
            }
            body {
                display: grid;
                grid-template-columns: 1fr min(45rem, 90%) 1fr;
                padding-bottom: 10rem;
            }
            body > * {
                grid-column: 2;
            }
            header {
                padding-bottom: 2em;
            }
            .gh-link svg {
                display: inline-block;
                height: 2em;
            }
        </style>
    </head>
    <body>
        <header style="grid-column-start: 1; grid-column-end: -1; display: grid; grid-template-columns: 1fr 1fr">
            <div style="background-color: #3178c6; flex-grow: 1; text-align: right">
                <h1 class="cds-t-h1">ts-</h1>
            </div>
            <div style="background-color: #f90; flex-grow: 1">
                <h1 class="cds-t-h1" style="float: left">blank-space</h1>
                <menu style="float: right; padding: 5px">
                    <a href="./play" class="cds-t-h4" style="margin-right: 5px">playground</a>
                    <a href="https://github.com/bloomberg/ts-blank-space" class="gh-link"
                        >{% include './github-mark.svg' %}</a
                    >
                </menu>
            </div>
        </header>
        <main class="cds-prose">{{ content }}</main>
        <script>
            const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
            function themeUpdate() {
                document.getElementById("prism-dark-link").toggleAttribute("disabled", !darkMode.matches);
            }
            darkMode.addEventListener("change", themeUpdate);
            themeUpdate();
        </script>
    </body>
</html>
